import {
  Button,
  Input,
  Radio,
  Space,
  Table,
  Image,
  message,
  Modal,
  Form,
  InputNumber,
  DatePicker,
} from "antd";
import "./style.less";
import React, { useState, Key } from "react";
import { options, defaultFilterParams } from "./config";
import { IActivityList } from "./activityManage.type";
import { ColumnsType } from "antd/es/table";
import useFetchList from "@/hooks/use-fetch-list";
import api from "@/api";
import { debounce } from "lodash";
import useDeleteList from "@/hooks/use-delete-list";
import UploadImg from "../components/upload-img";
const { TextArea } = Input;
const { RangePicker } = DatePicker;
const APP: React.FC = () => {
  //获取列表api
  const { dataSource, total, filterParams, setFilterParams } =
    useFetchList<IActivityList>({ API: api.getActivityList });
  //删除项
  const { setIds } = useDeleteList({
    API: api.delActivityList,
    success: () => {
      refreshList();
    },
  });
  const [selectList, setSelectList] = useState([] as Key[]);

  //更新
  const refreshList = (init = true) => {
    let params = init ? defaultFilterParams : filterParams;
    setFilterParams({
      ...params,
    });
  };
  //新增
  const [isModalOpen, setTsModalOpen] = useState(false);
  const handleAdd = () => {};

  const columns: ColumnsType<IActivityList> = [
    {
      title: "活动名称",
      dataIndex: "activityName",
      width: 300,
    },
    {
      title: "活动封面",
      dataIndex: "activityImg",
      render: (text) => {
        return <Image width={50} src={text} />;
      },
    },
    {
      title: "活动状态",
      dataIndex: "activityStatus",
      render: (text) => {
        return text === 1 ? "未开始" : text === 2 ? "进行中" : "已结束";
      },
    },
    {
      title: "活动上限",
      dataIndex: "activityMax",
    },
    {
      title: "活动人数",
      dataIndex: "activityRegistered",
    },
    {
      title: "活动时间",
      dataIndex: "activitStartDate",
      render: (text, record) => {
        return `${record.activitStartDate}-${record.activitStartDate}`;
      },
    },
    {
      title: "主办方",
      dataIndex: "business",
    },
    {
      title: "操作",
      fixed: "right",
      width: 300,
      render: (text, record) => (
        <span>
          <Button type="primary">编辑</Button>
          <Button
            danger
            onClick={() => {
              setIds([record.id]);
            }}
          >
            删除
          </Button>
          <Button>查看名单</Button>
        </span>
      ),
    },
  ];

  return (
    <div>
      <div className="act-manage">
        <div className="header">
          <Space>
            <Button
              onClick={() => {
                refreshList();
              }}
            >
              刷新
            </Button>
            <Button
              type="primary"
              onClick={() => {
                setTsModalOpen(true);
              }}
            >
              新增
            </Button>
            <Button
              danger
              onClick={() => {
                if (selectList?.length > 0) {
                  setIds(selectList);
                } else {
                  message.warning("请先选择活动");
                }
              }}
            >
              删除
            </Button>
          </Space>
          <Space>
            <Radio.Group
              options={options}
              defaultValue={0}
              onChange={(e) => {
                setFilterParams({
                  ...filterParams,
                  pageIndex: 1,
                  activityStatus: e.target.value,
                });
              }}
              optionType="button"
            />
            <Input
              placeholder="请输入活动名称"
              style={{ width: "265px" }}
              onChange={debounce((e) => {
                setFilterParams({
                  ...filterParams,
                  pageIndex: 1,
                  activityName: e.target.value,
                });
              }, 600)}
            />
          </Space>
        </div>
        <Table
          rowSelection={{
            type: "checkbox",
            onChange: (keys) => {
              setSelectList(keys);
            },
          }}
          columns={columns}
          dataSource={dataSource}
          rowKey={(record) => record.id}
          scroll={{ y: 480 }}
          pagination={{
            total,
            pageSize: filterParams.pageSize,
            current: filterParams.pageIndex,
            onChange: (page) => {
              setFilterParams({
                ...filterParams,
                pageIndex: page,
              });
            },
          }}
        />
        <Modal
          title="新增活动"
          open={isModalOpen}
          destroyOnClose={true}
          onOk={handleAdd}
          onCancel={() => {
            setTsModalOpen(false);
          }}
        >
          <Form
            name="basic"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
          >
            <Form.Item<IActivityList>
              label="活动名称"
              name="activityName"
              rules={[{ required: true, message: "请输入活动名称" }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item<IActivityList> label="活动上限" name="activityMax">
              <InputNumber placeholder="请输入" />
            </Form.Item>
            <Form.Item<IActivityList> label="活动时间" name="activitStartDate">
              <RangePicker />
            </Form.Item>
            <Form.Item<IActivityList> label="主办方" name="business">
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item<IActivityList> label="活动封面" name="activityImg">
              <UploadImg />
            </Form.Item>
            <Form.Item<IActivityList> label="活动详情" name="detail">
              <TextArea placeholder="请输入" />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </div>
  );
};
export default APP;
